<template>
    <div id="app">
        <el-card class="box-card">
            <div class="box_top">
                <h1>HT后台管理系统</h1>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="帐号：" prop="username">
                    <el-input
                            onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}"
                            v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input type="password"
                              onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}"
                              v-model="ruleForm.password"/>
                </el-form-item>
                <el-form-item label="验证码：" prop="code">
                    <div style="display: flex">
                        <el-input type="text"
                                  onkeydown="if(event.keyCode==13) {document.getElementById('loginBtn').click();return false;}"
                                  v-model="ruleForm.code"></el-input>
                        <div class="login-code">
                            <img :src="codeUrl"
                                 @click="getCode">
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div style="width: 100%;text-align: center">
                <el-button type="primary" id="loginBtn" @click="login()">登录</el-button>
            </div>

        </el-card>
    </div>
</template>

<script>
    import * as u from '@/util/util'
    import * as c from '@/util/config'

    export default {
        name: "login",
        data() {
            return {
                //登录表单
                ruleForm: {
                    username: 'admin',
                    password: '123456',
                    code: '',
                    randomStr: u.uuid(),
                },
                //登录校验
                rules: {
                    username: [
                        {required: true, message: '请输入帐号', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ],
                },
                //验证码图片url
                codeUrl: "",


            }

        },
        created() {
            this.getCode();
        },
        methods: {
            //获取验证码
            getCode() {
                this.$HttpService.get("/auth/sys-login/getCode", {
                    randomStr: this.ruleForm.randomStr,
                }).then(res => {
                    this.codeUrl = res;
                    this.randomStr = u.uuid();
                })
            },
            //登录
            login() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$HttpService.reqForm({
                            url: "/auth/login",
                            method: "post",
                            data: this.ruleForm,
                        }).then(res => {
                            //设置存储用户基本信息
                            this.$util.setLoginInfo(res);
                            //跳转路由
                            setTimeout(()=>{
                                this.$router.push({path:"/"})
                            },200)
                        }).catch(() => {
                            this.getCode();
                        })
                    }
                });

            }


        }
    }
</script>

<style scoped lang="scss">
    #app {
        width: 100%;
        height: 100%;
        background: url('../assets/loginBg.jpg');
        background-size: 100%;
    }

    .box_top {
        text-align: center;
        padding: 30px;
    }

    .box-card {
        width: 500px;
        height: 450px;
        padding: 20px;
        margin: 0 auto;
        margin-top: 50px;

        .three_login {
            border-top: 1px solid #dddddd;
            margin-top: 10px;
            padding-top: 10px;
            display: flex;
            width: 100%;
            .group{
                margin: 0 auto;
                span{
                    font-size: 12px;
                }
                .el-avatar{
                    background: white;
                }
            }
            .group:hover{
                span{
                   color: #a73e11;
                    cursor: pointer;
                }
            }

        }
    }

</style>
